<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";

.video-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-item {
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  background-color: $color-black;
  position: relative;

  .text-wrap {
    position: absolute;
    left: 3%;
    bottom: 9%;
    color: $color-white;
    font-size: .6rem;
    font-weight: $font-weight-500;

    .geolocation {
      h6 {
        font-size: .3733rem;
        background-color: $color-login-btn;
        padding: 0 .1rem;
        border-radius: .08rem;
        @include flex-center;
        display: inline-block;
      }
    }

    .text-title {
      font-size: .4rem;
      margin-bottom: .2rem;
    }

    .text {
      width: 6.9867rem;
      max-height: 3rem;
      display: block;

      p {
        font-size: .3733rem;
      }
    }
  }

  .side-bar {
    position: absolute;
    width: 1.0667rem;
    height: 7.2rem;
    right: 3%;
    bottom: 9%;
    @include flex-center;
    flex-direction: column;

    .avatar {
      width: 1.0667rem;
      height: 1.0667rem;
      border-radius: 50%;
      position: relative;
      border: .05rem solid $color-white;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }

      .sum {
        width: .3rem;
        height: .3rem;
        border-radius: 50%;
        background-color: $color-red;
        @include flex-center;
        position: absolute;
        bottom: -.15rem;
        // 中间
        left: 50%;
        transform: translateX(-50%);

        i {
          font-size: .2rem;
          color: $color-white;
        }
      }
    }

    .publicBtn {
      @include flex-center;
      flex-direction: column;
      width: 1.0667rem;
      height: 1.4rem;
      margin-top: .4rem;
      color: $color-white;

      i {
        font-size: .8rem;
      }

      p {
        font-size: .3733rem;
      }
    }

    .like-btn-active {
      color: $color-red;
    }
  }
}

.video-player {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.back-btn {
  position: absolute;
  top: 3%;
  left: 3%;
  width: .8rem;
  height: .8rem;
  @include flex-center;
  color: $color-white;
  font-size: .6rem;
}
</style>
<template>
  <transition name="fade">
    <teleport>
      <div class="video-box" :style="{ transform: getTransform() }" :ref="setVideoBoxRef">
        <!-- 返回 -->
        <div class="video-item" v-for="(item, index) in videoList" :key="item.videoId || index"
          @click.stop="playVideo(index)" @touchstart.passive="touchStart($event)" @touchmove.passive="touchMove($event)"
          @touchend="touchEnd">
          <video :ref="(el) => setVideoRef(el, index)" class="video-player" playsinline webkit-playsinline>
            <source :src="item.video.videoPath" type="video/mp4">
          </video>
          <div class="text-wrap">
            <!-- 地理信息 -->
            <div class="geolocation">
              <h6>北京</h6>
            </div>
            <div class="text-title">@{{ item.video.userNickname }}</div>
            <div class="text">
              <p>{{ item.video.videoDesc }}</p>
            </div>
          </div>
          <div class="side-bar">
            <!-- 头像 -->
            <div class="avatar">
              <img :src="item.video.videoCover" alt="">
              <!-- 关注按钮 -->
              <div class="sum">
                <i class="iconfont icon-jia"></i>
              </div>
            </div>
            <!-- 点赞按钮 -->
            <div class="like-btn publicBtn">
              <i class="iconfont icon-aixin1" :class="{ 'like-btn-active': item.isLiked }"
                @click.stop="likeVideo(item.video.videoId, videoList, 'video')"></i>
              <p>{{ item.stats.likeNum }}</p>
            </div>
            <!-- 评论按钮 -->
            <div class="comment-btn publicBtn" @click.stop="openComment(item.video.videoId)">
              <i class="iconfont icon-pinglun"></i>
              <p>{{ item.stats.commentNum }}</p>
            </div>
            <!-- 分享按钮 -->
            <div class="share-btn publicBtn">
              <i class="iconfont icon-a-huaban1fuben37"></i>
              <p>{{ item.stats.shareNum }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="back-btn" v-if="uniqueKey === 'user'">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <!-- 评论区 -->
      <CommentSection :showComment="showComment" :video="currentVideo" @close="isShowComment"
        @comment-success="commentSuccess" />
    </teleport>
  </transition>
</template>

<script setup>
import { useTemplateRef } from '../../hooks/useTemplateRef';
import { useTouchSwipe } from '../../hooks/useTouchSwipe';
import { useVideoStore } from '@/store/modules/video';
import CommentSection from '@/components/common/commentSection.vue';
import { useVideoPlayer } from '@/hooks/useVideoPlayer';
import { useVideoInteractions } from '@/hooks/useVideoInteractions';
const { videoRefs, setVideoRef, toggleVideoPlay, pauseAllVideos } = useVideoPlayer();
const { showComment, currentVideo, commentVideoId, likeVideo, openComment } = useVideoInteractions();
const props = defineProps({
  videoList: {
    type: Array,
    required: true,
    default: () => []
  },
  //接收一个唯一标识判断是首页还是我的页面使用
  uniqueKey: {
    type: String,
    required: true,
    default: () => 'home'
  },
  // 组件是否显示
  showBack: {
    type: Boolean,
    default: true
  }
});


const playVideo = (index) => {
  const currentVideo = videoRefs.value[index];
  if (currentVideo) {
    currentVideo.paused ? currentVideo.play() : currentVideo.pause();
  }
};
const videoStore = useVideoStore();
watch(() => videoStore.shouldPause, (newValue) => {
  if (newValue) {
    pauseAllVideos();
  }
});
const playCurrentVideo = (targetIndex) => {
  videoRefs.value.forEach((video, index) => {
    if (video && index !== targetIndex) video.pause();
  });
  const targetVideo = videoRefs.value[targetIndex];
  if (targetVideo) {
    targetVideo.play().catch(err => {
      console.warn('视频自动播放失败（需用户先交互）', err);
    });
  }
};

const { templateRef: videoBoxRef, setTemplateRef: setVideoBoxRef } = useTemplateRef();

const maxIndex = computed(() => props.videoList.length - 1);
const { start, move, end, getTransform, setCurrentIndex } = useTouchSwipe({
  threshold: 0.15,
  maxIndex: maxIndex,
  onIndexChange: (newIndex) => {
    playCurrentVideo(newIndex);
  }
});

const touchStart = (e) => {
  start(e);
  if (videoBoxRef.value) videoBoxRef.value.style.transition = 'none';
};
const touchMove = (e) => {
  move(e);
};
const touchEnd = (e) => {
  end(e);
  if (videoBoxRef.value) {
    videoBoxRef.value.style.transition = 'transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)';
  }
};

onMounted(() => {
  if (props.videoList.length > 0) {
    setCurrentIndex(0);
  }
});
const isShowComment = () => {
  showComment.value = false;
}
const commentSuccess = () => {
  // 重新请求评论
  openComment();
}
defineExpose({
  pauseAllVideos
})
</script>
